<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-12-09 09:15:52
 * @LastEditors: charles
 * @LastEditTime: 2021-12-09 16:18:43
-->
<template>
  <div class="engineer_details">
    <el-page-header @back="$router.go(-1)" content="工程页面"> </el-page-header>
    <div class="info">工程信息</div>
    <div class="engineer">
      <el-form>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工程编号">
              {{engineer.serial_number}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工程名称">
              {{engineer.name}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工程类型">
              {{engineer.type}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工程状态">
              <el-tag type="sucess" v-if="engineer.status === '监测中'">{{engineer.status}}</el-tag>
              <el-tag type="warning" v-else-if="engineer.status === '未绑定'">{{engineer.status}}</el-tag>
              <el-tag type="danger" v-else>{{engineer.status}}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间">
              {{+engineer.begin_time | fmtDate}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间">
              {{+engineer.end_time | fmtDate}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="地址">
              {{engineer.address}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="工程负责人">
              {{engineer.charge_id}}
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>
    <div class="info">
      绑定信息
      <el-button type="primary" style="position:absolute;right:1em;top:.5em" @click="toBind">绑定</el-button>
    </div>
    <el-table :data="devices">
      <el-table-column label="序号" type="index" :index="1" fixed="left"></el-table-column>
      <el-table-column label="设备编号" prop="serial_number" width="100" align="center" fixed="left"></el-table-column>
      <el-table-column label="设备名称" prop="name" align="center" width="160"></el-table-column>
      <el-table-column label="经度" prop="longitude" align="center" width="150"></el-table-column>
      <el-table-column label="纬度" prop="latitude" align="center" width="150"></el-table-column>
      <el-table-column label="视频地址" prop="video" align="center"></el-table-column>
      <el-table-column label="在线状态" prop="online_status" width="100" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.online_status === 1?'success':'danger'">
            {{scope.row.online_status === 1?'在线':'离线'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="toUnbind(scope.row)">解绑</el-button>
          <el-button type="text" v-if="scope.row.online_status === 1" @click="toOffLine(scope.row)">下线</el-button>
          <el-button type="text" v-else @click="toOnLine(scope.row)">上线</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 抽屉 -->
    <Briupdrawer :drawer-visible="visible" :title="title" width="50%" @on-change-visible="handlerVisibleChange" >
      <div slot="content">
        <el-form :model="form" ref="engineerBindForm" :rules="rules" label-width="80px" size="mini">
          <div style="line-height:2.4em;background-color:#f4f4f4;padding:0 .5em;border-radius:5px;margin-bottom:.5em">1. 选择设备</div>
          <el-row>
            <el-col :span="24">
              <el-form-item label="设备" prop="longitude">
                <el-select v-model="form.device_id">
                  <el-option v-for="d in allDevices" :key="d.id" :label="d.name" :value="d.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div style="line-height:2.4em;background-color:#f4f4f4;padding:0 .5em;border-radius:5px;margin-bottom:.5em">2. 配置设备</div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="经度" prop="longitude">
                <el-input v-model="form.longitude"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纬度" prop="latitude">
                <el-input v-model="form.latitude"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="视频流" prop="video">
                <el-input v-model="form.video"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible = false">取消</el-button>
        <el-button size="small" type="primary" @click="submitHandler">确定</el-button>
      </span>
    </Briupdrawer>
    <!-- 抽屉结束 -->
  </div>
</template>
<script>
import { get } from '@/utils/request';
export default {
  data(){
    return {
      visible:false,
      title:'绑定设备',
      form:{},
      rules:{
        video: [ { required: true, message: '请输入视频流', trigger: 'blur' } ],
        longitude: [ { required: true, message: '请输入经度', trigger: 'blur' } ],
        latitude: [ { required: true, message: '请输入纬度', trigger: 'blur' } ],
      },
      engineer:{},
      devices:[],
      allDevices:[],
    }
  },
  mounted(){
    this.engineer = this.$route.query;
    this.loadDevices();
    this.loadAllDevices();
  },
  methods:{
    // 确认绑定
    submitHandler(){
      let url = "/engineer/bindService"
      get(url,this.form).then(resp => {
        this.$message({ type: 'success', message: resp.message });
        this.loadDevices()
        this.visible = false;
      })
    },
    // 绑定
    toBind(){
      this.visible = true;
      this.form.engineer_id = this.engineer.id
    },
    // 解绑
    toUnbind(row){
      this.$confirm('设备解绑后将自动下线，并且产生拆机工单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = '/engineer/unbindDevice'
        let param = {
          engineer_id:this.engineer.id,
          device_id:row.id
        }
        get(url,param).then(response =>{
          this.$message({ type: 'success', message: response.message });
          this.loadDevices()
        })
      })
    },
    // 下线
    toOffLine(row){
      this.$confirm('设备下线后将无法采集数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = '/device/closeDevice'
        get(url,{id:row.id}).then(response =>{
          this.$message({ type: 'success', message: response.message });
          this.loadDevices()
        })
      })
    },
    // 上线
    toOnLine(row){
      this.$confirm('设备上线后将启用采集数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = '/device/openDevice'
        get(url,{id:row.id}).then(response =>{
          this.$message({ type: 'success', message: response.message });
          this.loadDevices()
        })
      })
    },
    // 加载设备
    loadDevices(){
      let url = "/device/pageQuery"
      let params = {
        page:1,
        pageSize:10,
        engineer_id:this.engineer.id
      }
      get(url,params).then(resp => {
        this.devices = resp.data.list
      })
    },
    // 加载设备
    loadAllDevices(){
      let url = "/device/pageQuery"
      let params = {
        page:1,
        pageSize:10,
        bind_status:0
      }
      get(url,params).then(resp => {
        this.allDevices = resp.data.list
      })
    },
     // 重置表单校验
    clearValidate() {
      this.$refs.engineerBindForm.clearValidate();
    },
    // 处理visible变化的钩子函数，解决抽屉无法收缩的bug
    handlerVisibleChange(val) {
      this.visible = val
    }
  }
}
</script>
<style lang="scss" scoped>
.engineer_details {
  .info {
    position: relative;
    text-align: left;
    line-height: 3em;
    background-color: #f4f4f4;
    border-radius: 5px;
    padding: 0 1em;
    margin: .5em 0;
  }
  .engineer {
    padding: 0 3em;
    text-align: center;
    border-bottom: 1px solid #f4f4f4;
    margin-bottom: 1em;
  }
}
</style>